<template>
  <div class="page-box h100 display-flex czbj fgdgtte">
    <n-form inline size="normal">
      <n-form-item>
        <n-button type="info" size="medium" class="ml10" @click="saveFun"
          >保存</n-button
        >
        <n-button type="error" size="medium" class="ml10" @click="Back"
          >返回</n-button
        >
      </n-form-item>
    </n-form>

    <n-form
      ref="formRef"
      label-placement="left"
      label-width="120px"
      require-mark-placement="right-hanging"
      size="medium"
      :style="{
        maxWidth: '1000px',
      }"
    >
      <n-grid :cols="24" :x-gap="20">
        <n-form-item-gi :span="12" label="角色名称" class="mt20">
          <n-input
            type="text"
            placeholder=""
            size="medium"
            clearable
            v-model:value="title"
          ></n-input>
        </n-form-item-gi>
        <n-form-item-gi
          :span="12"
          label="主页"
          class="mt20"
          
          v-if="usertype != 1"
        >
          <n-select :options="store.state.routerList" v-model:value="index" filterable />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="logo" v-if="usertype != 1">
          <div
            class="headPortrait-box vertical-center sz"
            @click="photoShowModal = true"
          >
            <img :src="logo" v-if="logo" />
            <i class="iconfont dx-tupian fz30" v-else> </i>
          </div>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="头部显示大盘" v-if="usertype != 1">
          <n-radio-group v-model:value="dapang" name="radiogroup">
            <div class="ddfrww">
              <n-radio value="1" name="是"> 是 </n-radio>
              <n-radio value="2" name="否"> 否 </n-radio>
            </div>
          </n-radio-group>
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="角色菜单">
          <n-checkbox-group v-model:value="cities">
            <n-data-table
              max-height="700"
              :columns="columns"
              :data="datalist"
              :row-key="rowKey"
              :default-expanded-row-keys="expandedKey"
              class="mt10"
            />
          </n-checkbox-group>
        </n-form-item-gi>
      </n-grid>
    </n-form>

    <n-modal
      v-model:show="photoShowModal"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>图片库</div>
      </template>
      <div>
        <photoGallery @getImg="getImg"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { ref, h, computed } from "vue";
import store from "../../../store";
import { NCheckbox } from "naive-ui";
import { dxpost, callBack, qurl, dxget } from "../../../util/index";
import photoGallery from "../../../components/util/photoGallery";
const photoShowModal = ref(false);
const cities = ref();
const title = ref();
const index = ref();
const logo = ref();
const dapang = ref("1");
const Back = callBack;
const rowKey = (row) => row.id;
const cz = qurl();
const menuID = ref(0); // 是否为编辑状态
const expandedKey = ref([]);
const usertype = localStorage.usertype;
if (store.state.menumgList) {
  store.state.menumgList.map((a) => {
    expandedKey.value.push(a.id);
  });
}
const datalist = computed(() => {
  //  const datsw =  store.state.menumgList.filter(a=> a.usertype==cz.usertype)
  return store.state.menumgList;
});
const columns = [
  {
    title: "模块标题",
    width: "200",
    key: "title",
  },
  {
    title: "功能权限",
    render(row) {
      if (row.parentMenuCode != 0) {
        return [
          h(NCheckbox, {
            value: row.PagePermissionIdentification,
            label: "页面",
          }),
          h(NCheckbox, {
            value: row.DeletePermissionID,
            label: "删除",
          }),
          h(NCheckbox, {
            value: row.ViewPermissionID,
            label: "查看",
          }),
          h(NCheckbox, {
            value: row.EditPermissionIdentifier,
            label: "编辑",
          }),
          h(NCheckbox, {
            value: row.NewPermissionIdentifier,
            label: "新增",
          }),
        ];
      } else {
        return [
          h(NCheckbox, {
            value: row.PagePermissionIdentification,
            label: "页面",
          }),
        ];
      }
    },
  },
];

const saveFun = async () => {
  const cs: any = {};
  cs.thenAdd = "name";
  cs.name = title.value;
  cs.index = index.value;
  cs.logo = logo.value;
  cs.dapang = dapang.value;
  cs.RoleOfTheMenu = cities.value.join(",");
  if (localStorage.usertype && localStorage.usertype != "null") {
    cs.usertype = localStorage.usertype;
  }

  if (menuID.value) {
    cs.id = menuID.value;
  }
  if (cs.usertype == 1) {
    cs.index = "/tj";
  }
  let { errno }: any = await dxpost(
    "dxgjAdmin/rolemanagement",
    cs,
    menuID.value != 0 ? "PUT" : "POST"
  );
  window.$message.success("操作成功！");
  console.log(errno);
  callBack();
};
const initData = async () => {
  let { data }: any = await dxget("dxgjAdmin/rolemanagement?userType=4", cz);
  cities.value = data.RoleOfTheMenu.split(",");
  title.value = data.name;
  menuID.value = data.id;
  index.value = data.index;
  logo.value = data.logo;
  dapang.value = "" + data.dapang;
};
let logoImg = null;
const getImg = (img) => {
  logoImg = img;
};
const setImg = () => {
  logo.value = logoImg;
  photoShowModal.value = false;
};
if (cz.id) {
  initData();
}
</script>
 <style scoped>
.fgdgtte {
  overflow: auto;
}
.ddfrww {
  position: relative;
  top: 4px;
}
</style>